<template>
  <div class="main" id="dashboardMain">
<!--    标签-->
    <div class="tab-bar">
      <div class="refresh-btn" @click="refresh">
        <img src="@/assets/dashboard/refresh.png" width="12" height="12" />
      </div>
      <div class="alltabs">
        <div
          class="onetab"
          v-for="(item,index) in componentList"
          :class="{active:item.active,nextActive:componentList[index+1]&&componentList[index+1].active}"
          @click="switchTab(index)"
        >
          <img :src="item.icon||defaultIcon" width="16" height="16" />
          <span class="title">{{ item.title }}</span>
          <div class="close-tab-btn" v-if="item.allowClose" @click.stop="closeTab(index)">
            <img src="@/assets/dashboard/closetab-icon.png" width="9" height="9" />
          </div>
        </div>
      </div>
    </div>
<!--    页面-->
    <template v-if="activeIndex>-1">
      <keep-alive include="dashboard">
        <template v-if="componentList[activeIndex].type==='component'">
          <component :is="componentList[activeIndex].comp" :key="componentKey"></component>
        </template>
        <template v-else-if="componentList[activeIndex].type==='url'">
          <iframe ref="myIframe" class="myIframe" :src="componentList[activeIndex].url"></iframe>
        </template>
      </keep-alive>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex"
//页面--开始
import dashboard from './dashboard' //工作台首页
import searchResult from './searchResult' //搜索结果页
import myPending from './myPending' //我的待办
import myAssetsApplication from './assetsApplication/mine' //我的申请
import myAssetsApplicationPurchase from './assetsApplication/purchase' //固资申购
import myAssetsApplicationScrap from './assetsApplication/scrap' //报废申请
import myAssetsApplicationTransfer from './assetsApplication/transfer' //调拨申请
import myAssetsApplicationBorrow from './assetsApplication/borrow' //借用申请
import myAssetsApplicationClaiments from './assetsApplication/claiments' //低值申领
import myAssetsApplicationPurchaseConsumables from './assetsApplication/purchaseConsumables' //低值申购
//页面--结束
import defaultIcon from '@/assets/dashboard/tab-icon.png'
import searchResultIcon from '@/assets/dashboard/search-result-icon.png'
import myPendingIcon from '@/assets/dashboard/my-pending-icon.png'
import myAssetsApplicationIcon from '@/assets/dashboard/appIcons/wodeshenqing.png'
import myAssetsApplicationPurchaseIcon from '@/assets/dashboard/appIcons/guzishengou.png'
import myAssetsApplicationScrapIcon from '@/assets/dashboard/appIcons/baofeishenqing.png'
import myAssetsApplicationTransferIcon from '@/assets/dashboard/appIcons/diaoboshenqing.png'
import myAssetsApplicationBorrowIcon from '@/assets/dashboard/appIcons/jieyongshenqing.png'
import myAssetsApplicationClaimentsIcon from '@/assets/dashboard/appIcons/dizhishenling.png'
import myAssetsApplicationPurchaseConsumablesIcon from '@/assets/dashboard/appIcons/dizhishengou.png'
export default {
  name: "",
  props: {
    workList: {
      type: Array,
      default: [],
    }, //办公事务
    officialManageTotal: {
      type: Number,
      default: 0,
    },
  },
  components: {
    dashboard,
    searchResult,
    myPending,
    myAssetsApplication,
    myAssetsApplicationPurchase,
    myAssetsApplicationScrap,
    myAssetsApplicationTransfer,
    myAssetsApplicationBorrow,
    myAssetsApplicationClaiments,
    myAssetsApplicationPurchaseConsumables,
  },
  data() {
    return {
      defaultIcon: defaultIcon,
      allComponentList: [
        {
          title: '工作台',
          comp: 'dashboard',
          icon: defaultIcon,
          url: '',
          type: 'component',
        },
        {
          title: '搜索结果',
          comp: 'searchResult',
          icon: searchResultIcon,
          url: '',
          type: 'component',
        },
        {
          title: '我的待办',
          comp: 'myPending',
          icon: myPendingIcon,
          url: '',
          type: 'component',
        },
        {
          title: '我的申请',
          comp: 'myAssetsApplication',
          icon: myAssetsApplicationIcon,
          url: '',
          type: 'component',
        },
        {
          title: '固资申购',
          comp: 'myAssetsApplicationPurchase',
          icon: myAssetsApplicationPurchaseIcon,
          url: '',
          type: 'component',
        },
        {
          title: '报废申请',
          comp: 'myAssetsApplicationScrap',
          icon: myAssetsApplicationScrapIcon,
          url: '',
          type: 'component',
        },
        {
          title: '调拨申请',
          comp: 'myAssetsApplicationTransfer',
          icon: myAssetsApplicationTransferIcon,
          url: '',
          type: 'component',
        },
        {
          title: '借用申请',
          comp: 'myAssetsApplicationBorrow',
          icon: myAssetsApplicationBorrowIcon,
          url: '',
          type: 'component',
        },
        {
          title: '低值申领',
          comp: 'myAssetsApplicationClaiments',
          icon: myAssetsApplicationClaimentsIcon,
          url: '',
          type: 'component',
        },
        {
          title: '低值申购',
          comp: 'myAssetsApplicationPurchaseConsumables',
          icon: myAssetsApplicationPurchaseConsumablesIcon,
          url: '',
          type: 'component',
        },
      ],
      componentList: [
        {
          title: '工作台',
          comp: 'dashboard',
          icon: defaultIcon,
          url: '',
          type: 'component',
          allowClose: false,
          active: true,
        },
      ],
      componentKey: 0,
    }
  },
  computed: {
    ...mapState(["myInfo", "icReadDriveOpen"]),
    activeIndex(){
      return this.componentList.findIndex((item)=>{
        return item.active
      })
    },
  },
  beforeMount() {
    /* 新增插件下载  */
    window.$refreshTab = this.refresh
    window.$addTab = this.addTab
    window.$switchTab = this.switchTabByName
    window.$closeTab = this.closeTabByName
  },

  mounted() {
    this.$store.dispatch('getAllApps', this.myInfo.id);
    this.$store.commit('setDashboardSearchTypes',[
      {
        text: '综合',
        value: '',
        active: true,
      },
      {
        text: '待办申请',
        value: '',
        active: false,
      },
      {
        text: '公文通知',
        value: '',
        active: false,
      },
      {
        text: '联系人',
        value: '',
        active: false,
      },
      {
        text: '会话',
        value: '',
        active: false,
      },
      {
        text: '文件图片',
        value: '',
        active: false,
      },
      {
        text: '应用',
        value: '',
        active: false,
      },
      {
        text: '文章',
        value: '',
        active: false,
      },
      {
        text: '自助机',
        value: '',
        active: false,
      },
      {
        text: 'G3平台',
        value: '',
        active: false,
      },
    ])
    this.$store.commit('setDashboardSearchText','')
    //开发测试用
    //this.addTab('报废申请')
  },

  methods: {
    //刷新
    refresh() {
      if(this.componentList[this.activeIndex].type==='component'){
        this.componentKey = Math.random()
      }
      else if(this.componentList[this.activeIndex].type==='url'){
        this.$refs.myIframe.contentWindow.location.reload(true)
      }
    },
    //切换标签页
    switchTab(index) {
      console.log('切换tab',index)
      this.componentList = this.componentList.map((it,i)=>{
        return {
          ...it,
          active: index === i
        }
      })
    },
    switchTabByName(tabName) {
      let tabIndex = this.componentList.findIndex((item)=>{
        return item.title === tabName
      })
      if(tabIndex !== -1){
        this.switchTab(tabIndex)
      }
    },
    //关闭标签页
    closeTab(index) {
      if(index === this.activeIndex){
        //this.switchTab(0)
        this.switchTab(index - 1)
      }
      this.$nextTick(()=>{
        this.componentList.splice(index,1)
      })
    },
    closeTabByName(tabName) {
      let tabIndex = this.componentList.findIndex((item)=>{
        return item.title === tabName
      })
      this.closeTab(tabIndex)
    },
    //新增标签页
    addTab(tabName) {
      let tabObj = this.allComponentList.find((item)=>{
        return item.title === tabName
      })
      let tabIndex = this.componentList.findIndex((item)=>{
        return item.title === tabName
      })
      if(tabObj){
        if(tabIndex===-1){
          tabObj.allowClose = true
          tabObj.active = false
          this.componentList.push(tabObj)
          this.switchTab(this.componentList.length - 1)
        }
        else{
          this.switchTab(tabIndex)
        }
      }
    },
    // addTabComp(title,comp,icon = defaultIcon) {
    //   this.componentList.push({
    //     title,
    //     comp,
    //     icon,
    //     url: '',
    //     type: 'component',
    //     allowClose: true,
    //     active: false,
    //   })
    //   this.switchTab(this.componentList.length - 1)
    // },
  },
  watch: {
    "reqLoading.state"(v) {
      console.log(v, 45111111);
    },
  },
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: MiSans;
  src: url('~@/assets/dashboard/font/MiSans-Medium.ttf');
  //src: url('~@/assets/dashboard/font/MiSans-Normal.ttf');
}
.main {
  font-family: MiSans;
  width: calc(100vw - 56px);
  height: 100vh;
  overflow: hidden;
  position: relative;
  .tab-bar {
    position: relative;
    z-index: 99999;
    width: 100%;
    height: 40px;
    background-color: #f5f7fa;
    box-sizing: border-box;
    padding: 4px 0;
    display: flex;
    align-items: center;
    .refresh-btn {
      width: 24px;
      height: 24px;
      cursor: pointer;
      margin: 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .alltabs {
      width: calc(100% - 50px);
      height: 100%;
      display: flex;
      align-items: center;
      .onetab {
        width: 160px;
        height: 100%;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 0 16px;
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          width: 1px;
          height: 22px;
          background-color: rgba(0,0,0,0.06);
          top: 5px;
          right: 0;
        }
        &:last-child:after {
          display: none;
        }
        &.active {
          background-color: #fff;
          &:after {
            display: none;
          }
        }
        &.nextActive {
          &:after {
            display: none;
          }
        }
        .title {
          width: calc(100% - 38px);
          margin-left: 8px;
        }
        .close-tab-btn {
          width: 14px;
          height: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          border-radius: 2px;
          &:hover {
            background-color: #f5f5f5;
          }
        }
      }
    }
  }
  .myIframe {
    width: 100%;
    height: calc(100vh - 40px);
    overflow: auto;
  }
}
</style>
